<template>
  <div class="common-plot">
    <div class="title">
      <slot name="title"></slot>
    </div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script setup></script>

<style scoped>
.title {
  background-image: url('../../assets/images/chart-item.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 350px;
  height: 35px;
  margin-bottom: 5px;
  text-align: center;
  line-height: 35px;
  color: #fff;
  font-size: 16px;
  font-weight: normal;
}
.content {
  width: 350px;
  min-height: 100px;
  border-radius: 10px;
  padding: 20px;
  background-image: linear-gradient(to bottom, #245f8483, #1b236a4a);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.content::before {
  display: block;
  content: '';
  width: 110px;
  height: 35px;
  background-image: url('../../assets/images/border.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: absolute;
  left: -2px;
  top: -6px;
  transform: rotate(180deg);
}

.content::after {
  display: block;
  content: '';
  width: 110px;
  height: 35px;
  background-image: url('../../assets/images/border.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: absolute;
  right: -3px;
  bottom: -6px;
}
</style>
